<template>
	<view class="font-28" v-if="list.length > 0">
		<up-checkbox-group v-model="checkboxValue" placement="column" @change="submit">
			<view v-for="item in list" :key="item.id" class="mar-bottom-30 color-646464 bg-white pad-30">
				<up-checkbox placement="column" :name="item.order_no" :customStyle="{marginTop: '8rpx',width:'100%'}"
					size="36rpx" labelSize="26rpx" shape="circle">
					<template #label>
						<view class=" Zmar-left-20">
							<view class="betweenX">
								<view>水表编号: {{item?.water_meter_info?.code}}</view>
								<view class="font-w-500 color-error">{{item.amount}}</view>
							</view>
							<view class="mar-top-10">订单号: {{item.order_no}}</view>
							<view class="mar-top-10">时间:
								{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss')}}
							</view>
						</view>
					</template>
				</up-checkbox>

			</view>
		</up-checkbox-group>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { timeFormat } from '@/node_modules/uview-plus';
	const emit = defineEmits(['change']);

	const props = defineProps({
		list: {
			type: Array,
			default:()=> (()=>[])
		}
	});

	const checkboxValue = ref([]);
	// 确认提交
	const submit = (e) => {
		emit('change', e);
	}
</script>

<style scoped>
	.button-style {
		padding: 21rpx 0;
		text-align: center;
	}

	.list {
		width: 100%;
	}

	/deep/.u-checkbox__label-wrap {
		width: 100%;
	}
</style>